<template>
    <div class="outer">
        <h1>count</h1>
        <h2>电影列表的长度{{movieList.length}}</h2>
        <h2>count的值是:{{count}}</h2>
        <h2>doubleCount的值是:{{doubleCount}}</h2>
        <button @click="increment">累加</button>
        <button @click="incrementN(3,4)">累加</button>
        <button @click="incrementWait">等等累加</button>

    </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Count",
});
</script>
  
<script setup lang="ts">
import { storeToRefs } from "pinia"
// 1.引入store的hooks方法
import useCountStore from "../store/couunt"
import useMovieStore from "../store/movie"
// 2.调用store的hooks方法的到store对象
const countStore = useCountStore();
const movieStore = useMovieStore();
// 3.解构store中的值
const {count,doubleCount} = storeToRefs(countStore);
const {movieList} = storeToRefs(movieStore)
// 4.解构store中的action方法
const {increment,incrementN,incrementWait} = countStore;

</script>
  
<style scoped>
.outer {
    background-color: pink;
}
</style>